Day21 寫於開始實作前(2)：Vue.js的Methods以及監聽事件 (v-on)

第 11 屆 iThome 鐵人賽

DAY 21

自我挑戰組

11th鐵人賽 vue.js vue vue學習筆記斜槓女紙

2647 瀏覽

本文同步發表於斜槓女紙部落格：Day21 寫於開始實作前(2)：Vue.js的Methods以及監聽事件 (v-on)

Day21 寫於開始實作前(2)：Vue.js的Methods以及監聽事件 (v-on)

實作到目前為止，大部分還在處理靜態網頁的畫面。但是呢～別忘了我們的設計稿是一份包含『預約訂房』功能可以與瀏覽者(消費者)互動的動態網頁。今天就要來和大家聊聊在Vue.js中能掌控網頁元素所有動作的監聽事件(v-on)。

何謂「靜態網頁設計」? 何謂「動態網頁設計」?

What is v-on？

v-on是用來在HTML元素中加入事件監聽器，即可找到對應的事件處理方法。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。同等於JavaSctipt的addEventListener以及jQuery中的.on()

在HTML元素上使用v-on建立監聽事件時，我們並需在new Vue中使用methods這個屬性用來定義方法，如果我們在UI操作了什麼動作，都可以寫methods去回傳方法，執行相對應的事件，通常methods定義方法的方式是一個包住function的object。

直接綁定methods的function名稱
讓我們稍微改寫一下昨天的範例來解釋，首先在<button>上利用v-on綁定show事件，點下按鈕實會跳出alert

<button v-on:click="show">點我出現alert</button>

new Vue({
  el: '#demo',
  methods: {
		show: function (){
			alert('哈囉你好嗎!');
			return false;
		},
	},
})

行內敘述inline statement寫法
這次改用另一種寫法，我們在say這個method傳入一個『我是鐘小呆』的字串，注意字串要使用單引號 ‘ 包起來。點下按鈕後回直接回傳我們所帶入在v-on的字串。

<button v-on:click="say('我是鐘小呆')">行內敘述寫法，點我</button>

new Vue({
  el: '#demo',
  methods: {
    say: function (message) {
      alert(message)
    },
	},
})

Vue.js 藉由事件修飾符 (Event Modifiers) 處理了許多 DOM 事件的細節，讓我們能專注於程式邏輯的撰寫。

寫法為v-on:事件.修飾符，如v-on:click..prevent，也可同等於@click.prevent

修飾符號	用途
`.stop`	呼叫js中的`event.stopPropagation()`，停止事件往父層繼續傳遞。
`.prevent`	呼叫js中的`event.preventDefault()`，防止執行瀏覽器事件的預設行為。
`.capture`	可將事件的傳遞改由父層往子層傳遞。
`.self`	僅僅觸發自己範圍的事件，不包含子層。
`.native`	監聽元件根元素的原生事件。
`.once`	事件只能被執行一次。
`.passive`	2.3.0版本後加入，會以`{ passive : true }`的模式添加事件監聽器。